Kurt Hsu's blog

The Rails developer in taiwan.


  • 首頁

  • 標籤

  • 分類

  • 歸檔

[Hexo]利用Cloudfront讓Hexo部署到S3

發表於 2019-08-11 更新於 2020-04-21 分類於 AWS , S3 , Hexo

終於把部落格架好了, 為了有DNS和Https花了不少時間看AWS文件, 結果朋友一篇文章就搞定了, 還跟AWS的教學完全不一樣XD

我認為Hexo部署到S3好處有幾點:

  1. Hexo輕巧簡單(一鍵產生靜態檔案)
  2. Hexo支持Markdown, 許多完善主題等玩家開發的功能
  3. Hexo以後部署都很簡單
  4. 圖片就都存到S3沒問題
  5. Cloudfront支持https
  6. Cloudfront又穩又快

事前準備

有一個Hexo專案
有一個AWS帳號
有一個DNS

先把Hexo部署到S3

先去S3建立Bucket, Bucket name可以隨便, Region 選 Tokyo比較快, 其他設定都不用動直接創立

點入剛剛創立的bucket, 點選 Properties > Static website hosting

把它設定為Use this bucket to host a website, 再設定預設檔案之後存檔即可

再來點選 Properties > Permissions > Bucket Policy
可以看到 Policy 欄位是需要輸入程式碼的, 先記下Bucket policy editor ARN (我的是 arn:aws:s3:::kurt-blog), 然後點選最下面的 Policy generator 去產生程式碼

輸入以下資訊, 比較注意的是 Amazon Resource Name (ARN) 請輸入剛剛的 ARN/*, 輸入完後點選 Add statement

出現了以下東西直接點選 Generate Policy, 就會跳出程式碼, 全部複製到 剛剛 S3 Policy 欄位儲存即可

最後把 Block all public access 關閉, 仔細看的話他是可以選擇擋住哪些 ACLs 和 Policy, 這邊先不多追加研討, 如果全打開繼連剛剛設定的 Bucket policy 都會擋掉而失效了

Hexo安裝hexo-deployer-aws-s3這個套件,在config.yml底下輸入:

1
2
3
4
5
6
7
8
9
# Deployment
deploy:
type: s3
bucket: 剛剛創立的Bucket name
aws_key: your_aws_key
aws_secret: your_aws_secret
region: ap-northeast-1
headers: { CacheControl: 'max-age=604800, public' }
delete_removed: true

aws_key, aws_secret請去AWS security_credentials上,點選Access key並且create一個
注意: root key 產生後會給你下載, 請妥善保管不外流, 這是最大權限的 root key, 別人取得後可以在自己的 AWS 做所有事情, 且AWS也不會再給此組 key

最後試著產生靜態檔案並且部署看看

1
$ hexo g -d

如果成功的話 Bucket 裡面會有檔案

Coundfront + SSL 憑證

到AWS Cloudfront點選 Create Distribution > Web 的 Get Started

先拉到下面在ACM建立SSL

輸入*.yourdomain, *以後就可以吃到所有子網域, 然後點選Next

建議點選 E-mail 驗證比較快

注意: 他是會發到自己申請的網域平台的信箱, 而不是此 AWS 帳號的信箱喔!!
像我在 Goddaddy當初是直接利用FB登入所以WHOIS是hotmail, 結果我在 gmail 傻傻的等了一兩天甚至寫信給客服才發現…
成功之後在 AWS ACM應該可以看到剛剛申請的憑證狀態是綠色的 issued 字樣

在回到剛剛建立 Cloudfront 的表單那裡, 點選 Custom SSL Certificate, 點一下輸入欄應該就會彈出剛剛申請好的憑證可以選, 沒有的話請嘗試著刷新頁面和查看 ACM 狀態

然後表單拉到最上方開始輸入幾個地方就好:

  1. Origin Domain Name 彈出視窗點選自己剛剛部署好的 Bucket
  2. Viewer Protocol Policy 選第二個可以把 http 導向 https
  3. Compress Objects Automatically 選 yes 可以做資源壓縮, 就不需要自己對檔案做優化 gzip
  4. Price Class: 可以選亞洲(Asia)比較便宜
  5. Alternate Domain Names(CNAMES): 自己等等要設定的 DNS 例如我是 blog.kurthsu.tw

    接著建立完成就可以看到剛剛創立的 Cloudfront, 他的 Domain name 是 xxxxxxxx.cloundfront.net, 拿著這個地址去自己的 DNS 創造一個 CNAME 然後指向這裡

最後, 點選剛剛創立的 Cloudfront(ID 可以點選), 點選 Origins and Origin Groups 標籤, 忘記一開始有沒有一筆 Origin Domain Name And Path, 有的話就編輯沒有的話就新增

最後到剛剛部署的 S3 bucket 的 endpoint 地址輸入到 Origin Domain Name 就大功告成!

S3 bucket 的 endpoint 在剛剛設定 Static website hosting 的地方

參考文章: AWS S3 + CloudFront SSL 靜態網站架設教學

# AWS # S3 # Hexo
[Hexo]網站架設到Github
Clean AWS Cloudfront cache(清除快取)
  • 文章目錄
  • 本站概要

Kurt Hsu

Progress One Percent Every Day
171 文章
55 分類
163 標籤
RSS
  1. 1. 事前準備
  2. 2. 先把Hexo部署到S3
  3. 3. Coundfront + SSL 憑證
© 2020 Kurt Hsu
由 Hexo 強力驅動 v3.8.0
|
主題 – NexT.Muse v7.3.0